<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-input v-model="listQuery.orderNo" placeholder="请输入订单号" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.paymentPhone" placeholder="请输入电话号码" style="width: 160px;" class="filter-item" clearable @keyup.enter.native="handleFilter" />
      <label class="form-key" style="margin-left: 20px;">订单日期：</label>
      <el-date-picker
        v-model="listQuery.startTime"
        style="width:150px;"
        type="date"
        placeholder="选择日期"
      />
      <el-date-picker
        v-model="listQuery.endTime"
        style="width:150px;"
        type="date"
        placeholder="选择日期"
      />
      <el-select v-model="listQuery.targetType" placeholder="请选择" clearable class="filter-item" style="width: 120px">
        <el-option label="全部" value="" />
        <el-option label="课程" value="1" />
        <el-option label="商城" value="2" />
        <el-option label="家会员" value="3" />
        <el-option label="课程拼团" value="4" />
        <el-option label="899入驻" value="5" />
        <el-option label="活动" value="6" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-upload2" @click="handleExcelDownload">
        导出Excel
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :element-loading-text="g.loadingStr"
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column label="订单编号" align="center" width="200" fixed>
        <template slot-scope="{row}">
          <span>{{ row.orderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品图" width="200" align="center" fixed>
        <template slot-scope="{row}">
          <span><img :src="row.commodityImg" alt="" class="table-row-img"></span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commodityName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.businessName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户账号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.paymentPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.paymentPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单来源" align="center">
        <template slot-scope="{row}">
          <span>{{ row.orderSource | orderSource }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.paymentTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commodityAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.paidInAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center">
        <template slot-scope="{row}">
          <span>{{ row.paymentType | orderPayType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付状态" align="center" width="90px">
        <template slot-scope="{row}">
          <span>{{ row.paymentStatus | orderType }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="120px">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleInfo(row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <el-dialog
      title="详细信息"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <div v-if="detailInfo !== null">
        <el-row :gutter="20">
          <el-col :span="24"><div class="grid-content"><label class="header">订单信息</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">订单编号</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['id'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">创建时间</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['createTime'] | parseTime('{y}-{m}-{d} {h}:{i}') }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">付款方式</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentType'] | orderPayType }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">付款人名称</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentAccountName'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">支付时间</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentTime'] | parseTime('{y}-{m}-{d} {h}:{i}') }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">付款人手机号</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentPhone'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">订单状态</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['paymentStatus'] | orderType }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">订单来源</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['orderSource'] === 1 ? '线上' : '线下' }}</label></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24"><div class="grid-content"><label class="header">商品信息</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">商品图</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><img class="value-img" :src="detailInfo['order']['businessLogo']" alt=""></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">商品名称</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['setMealName'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">商户机构</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['businessName'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">机构地址</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['order']['addressDetail'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">套餐金额</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['priceInfo']['commodityTotal'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">机构优惠金额</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['priceInfo']['businessDiscountAmount'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">平台优惠金额</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['priceInfo']['platformDiscountAmount'] }}</label></div></el-col>
          <el-col :span="4"><div class="grid-content"><label class="key">实付金额</label></div></el-col>
          <el-col :span="8"><div class="grid-content"><label class="value">{{ detailInfo['priceInfo']['paidInAmount'] }}</label></div></el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { urlEncode } from '@/utils'
import { orderList, orderDetail } from '@/api/order'
export default {
  name: 'OrderList',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        orderNo: '',
        paymentPhone: '',
        startTime: '',
        endTime: '',
        targetType: ''
      },

      dialogVisible: false,
      detailInfo: null
    }
  },
  created() {
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      var data = new Map()
      for (const key of Object.keys(this.listQuery)) {
        data[key] = this.listQuery[key] == null ? '' : this.listQuery[key]
      }
      data.startTime = data.startTime !== '' ? this.listQuery.startTime.getTime() : data.startTime
      data.endTime = data.endTime !== '' ? this.listQuery.endTime.getTime() : data.endTime
      orderList(data).then(response => {
        console.log(response.data)
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleExcelDownload() {
      var data = new Map()
      for (const key of Object.keys(this.listQuery)) {
        data[key] = this.listQuery[key] == null ? '' : this.listQuery[key]
      }
      data.startTime = data.startTime !== '' ? this.listQuery.startTime.getTime() : data.startTime
      data.endTime = data.endTime !== '' ? this.listQuery.endTime.getTime() : data.endTime
      window.location.href = process.env.VUE_APP_BASE_API + 'jbl-order/api/admin/v1/order/export?' + urlEncode(data).slice(1)
    },
    handleInfo(row) {
      console.log(row)

      this.dialogVisible = true
      orderDetail({ id: row['id'] }).then(response => {
        const data = response.data
        this.detailInfo = data
      })
    }
  }
}
</script>

<style lang="scss">
  $rowHeight:36px;
  $headerHeight:40px;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: $rowHeight;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .header {
    height: $headerHeight;
    line-height: $headerHeight;
    display: block;
    font-size: 18px;
  }
  .key {
    display: block;
    line-height: $rowHeight;
    font-weight: 400;
    text-align: right;
  }
  .value {
    display: block;
    line-height: $rowHeight;
    font-weight: 400;
  }
  .value-img {
    height: 100px;
    width: auto;
  }
</style>
